<template>
	<!-- 消息 -->
	<view class="">
		<!-- 导航栏 -->
		<view class="day">
			<view class="box1">
				<text>消息</text>
			</view>
			<view class="box">
				<text>创建聊天</text>
			</view>
		</view>
			<view class="ever">
				<view>
					<image src="../../static/点赞.png" mode=""></image>
					<text>赞和收藏</text>
				</view>
				<view>
					<image src="../../static/关注.png" mode=""></image>
					<text>新增关注</text>
				</view>
				<view>
					<image src="../../static/消息4.png" mode=""></image>
					<text>评论和@</text>
				</view>
			</view>
		<view class="xx" >
			<view :class="item.className"   v-for="(item,index) in arr" @touchstart="showDeleteButton(item)" @touchend="clearLoop"  >
				<image :src="item.userImg" @click="goOne"  mode="aspectFill"></image>
				<view class="xx3">
					<p>{{ item.userName }}</p>
					<p>{{ item.text }}</p>
				</view>
				<view class="xx4">
					<p>{{ item.date }}</p>
					<uni-badge v-show="item.read==false" :text="item.num"></uni-badge>
					<uni-badge v-show="item.read==true" text=""></uni-badge>
				</view>
				
				<!-- 功能按钮组 -->
				<div class='btns' v-show="item.btns">
					<ul>
						<ol v-show="item.read==false" @touchend="readfun(item)">标为已读</ol>
						<ol v-show="item.read==true" @touchend="readfun2(item)">标为未读</ol>
						<ol v-show="item.top==false" @touchend="topfun(item,index)">置顶该聊天</ol>
						<ol v-show="item.top==true" @touchend="topfun2(item,index)">取消置顶</ol>
						<ol @touchend="del(item,index)">删除该聊天</ol>
					</ul>
				</div>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:[
					{
						userImg:'/static/消息3.png',
						userName:'消息通知',
						text:'活动通知',
						date:'04-23',
						className:'xx2'
					},
					{
						userImg:'/static/mm.png',
						userName:'颠沛',
						text:'在的亲',
						date:'05-20',
						btns:false,  //按钮组
						read:false,
						top:false,
						className:'xx2'
					},
					{
						userImg:'/static/w6.png',
						userName:'树莓耳朵',
						text:'你好',
						date:'03-12',
						btns:false,  //按钮组
						read:false,
						top:false,
						num:4,
						className:'xx2'
					},
					{
						userImg:'/static/w10.png',
						userName:'倾听',
						text:'星期天有空吗',
						date:'04-28',
						btns:false,  //按钮组
						read:false,
						top:false,
						num:2,
						className:'xx2'
					},
					{
						userImg:'/static/w8.png',
						userName:'旧城旧梦旧时光',
						text:'可以',
						date:'05-14',
						btns:false,  //按钮组
						read:false,
						top:false,
						num:3,
						className:'xx2'
					},
					
				],
				Loop:'',
				bool:false
			}
		},
		methods: {
			goOne() {
				uni.navigateTo({
					url: "../add/add"
				})
			},
			//   长按刚开始的时候
			    showDeleteButton(item) {
			     	// console.log("刚开始按时触发");
					// 阻止冒泡
					event.stopPropagation()
					//清空功能按钮
					if(this.bool==false){
						for(let i of this.arr){
							i.btns = false;
						}
					}
			        clearInterval(this.Loop);//清理掉计时器，防止重复注册定时器
			        this.Loop=setTimeout(()=>{
			           // console.log("按过的0.5秒后触发");
					   item.btns = true
			        },500);
			    },
			//   长按松手的时候
			    clearLoop() {
					// event.preventDefault()    //阻止默认事件
			        // console.log("松手时触发");
			        //松手就清理掉计时器，也就是如果长按时间没到0.5秒，则取消长按事件的触发
			      	clearInterval(this.Loop)
			    },
				//已读
				readfun(item){
					item.read=true
					item.btns = false
				},
				//未读
				readfun2(item){
					item.read=false
					item.btns = false
				},
				//置顶
				topfun(item,index){
					item.top=true
					item.className='xx2 top'
					let obj=item
					this.arr.splice(index,1)
					this.arr.unshift(obj)
					item.btns = false
				},
				//取消置顶
				topfun2(item,index){
					item.top=false
					item.className='xx2'
					let obj=item
					this.arr.splice(index,1)
					this.arr.push(obj)
					item.btns = false
				},
				//删除聊天
				del(item,index){
					this.arr.splice(index,1)
					item.btns = false
				}
		}
	}
</script>


<style scoped lang="scss">
	@import "news.scss"
</style>
<style>
	page {
		background-color: #ffffff;
	}
</style>

